/**
 * React19里关于 Context 有变化
 * 1.不需要再写 LangContext.Provider,直接使用LangContext
 * 2. 使用use代替了useContext
 *
 */
import { useState, createContext, use } from "react";
const LangContext = createContext("zh");
const messages = {
  zh: {
    greeting: "你好，世界",
    switchLang: "切换语言",
  },
  en: {
    greeting: "Hello World",
    switchLang: "switch Language",
  },
};
function LanguageText() {
  //const lang = useContext(LangContext)
  const lang = use(LangContext);
  return (
    <div>
      <h2>{messages[lang].greeting}</h2>
    </div>
  );
}
function App() {
  const [lang, setLang] = useState("zh");
  return (
    <LangContext value={lang}>
      <LanguageText />
      <button onClick={() => setLang(lang === "zh" ? "en" : "zh")}>
        {messages[lang].switchLang}
      </button>
    </LangContext>
  );
}
export default App;
